<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>settlement</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        /* 地址选择模块 */
        .address-section {
            border: 2px dashed #ff5000;
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 30px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .address-section:hover {
            background: #fff8f6;
        }

        .address-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .address-title {
            color: #ff5000;
            font-size: 18px;
            font-weight: bold;
        }

        .address-content {
            color: #666;
            line-height: 1.6;
        }

        /* 商品清单模块 */
        .goods-list {
            border-top: 1px solid #eee;
            padding: 15px 0;
        }

        .goods-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }

        .goods-img {
            width: 80px;
            height: 80px;
            border-radius: 6px;
            margin-right: 20px;
        }

        .goods-info {
            flex: 1;
        }

        .goods-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 8px;
        }

        .goods-spec {
            color: #999;
            font-size: 14px;
        }

        .goods-price {
            width: 150px;
            text-align: right;
            color: #ff5000;
            font-weight: bold;
        }

        /* 价格明细 */
        .price-detail {
            margin-top: 20px;
            padding: 15px;
            background: #f8f8f8;
            border-radius: 6px;
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
        }

        .total-price {
            font-size: 18px;
            color: #ff5000;
        }

        /* 支付方式 */
        .payment-methods {
            margin: 30px 0;
        }

        .payment-title {
            font-size: 16px;
            margin-bottom: 15px;
        }

        .payment-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border: 1px solid #eee;
            border-radius: 4px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .payment-item:hover {
            border-color: #ff5000;
        }

        .payment-logo {
            width: 30px;
            margin-right: 15px;
        }

        /* 提交按钮 */
        .submit-section {
            position: sticky;
            bottom: 0;
            background: #fff;
            padding: 15px 0;
            border-top: 1px solid #eee;
        }

        .submit-btn {
            float: right;
            background: #ff5000;
            color: white;
            padding: 12px 40px;
            border: none;
            border-radius: 20px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .submit-btn:hover {
            background: #ff6f20;
        }
        .address-item {width:250px; height: 180px; margin-left: 6px; float: left; border: 1px solid #C9C5C5; border-radius: 5px; padding: 15px;margin-bottom: 10px;}
        #address::after { content: ""; display:block; clear:both; height:0px; overflow:hidden; }
        .default-address {border-color: #FF5722;}
    </style>
</head>
<body>
<div class="container">
    <!-- 地址选择 -->
    <div class="address-section" onclick="xzdz()">
        <div class="address-header">
            <span class="address-title">选择收货地址</span>
        </div>
        <div class="address-content">
            未设置默认收货地址<br>
            点击设置
        </div>
    </div>

    <!-- 商品清单 -->
    <div class="goods-list">
        <div class="goods-item">
            <img src="easyfile/1.jpg" class="goods-img">
            <div class="goods-info">
                <div class="goods-title">无商品</div>
                <div class="goods-spec">请选择商品</div>
            </div>
            <div class="goods-price">
                ¥299.00<br>
                <span style="font-size:12px;color:#999">x1</span>
            </div>
        </div>
        <!-- 更多商品项... -->
    </div>

    <!-- 价格明细 -->
    <div class="price-detail">
        <div class="price-row" id="priceInAll">
            <span>商品总价：</span>
            <span>¥0.00</span>
        </div>
<!--        <div class="price-row">-->
<!--            <span>运费：</span>-->
<!--            <span>¥0.00</span>-->
<!--        </div>-->
        <div class="price-row">
            <span>优惠：</span>
            <span>0%</span>
<!--            <span>-¥0.00</span>-->
        </div>
        <div class="price-row total-price" id="priceFinally">
            <span>实付款：</span>
            <span>¥0.00</span>
        </div>
    </div>

    <!-- 支付方式 -->
    <div class="payment-methods">
        <div class="payment-title">支付方式</div>
        <div class="payment-item">
            <img src="easyfile/2.jpg" class="payment-logo">
            支付宝
        </div>
<!--        <div class="payment-item">-->
<!--            <img src="wechatpay-logo.png" class="payment-logo">-->
<!--            微信支付-->
<!--        </div>-->
    </div>

    <!-- 提交栏 -->
    <div class="submit-section">
        <button type="button" class="submit-btn" onclick="jiesuandingdan()">订单结算</button>
    </div>
</div>

<!--选择地址-->
<div style="display: none" id="selectAddressWin">
</div>
<!--新增-->
<div style="display: none" id="addAddressWin" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-inline">
            <select name="provincecode2"  lay-filter="provincecode2">
                <option value='' selected disabled>请选择</option>
            </select>
            <input type="hidden" name="province">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-inline">
            <select name="citycode2" lay-filter="citycode2">
                <option value='' selected disabled>请先选择上一级</option>
            </select>
            <input type="hidden" name="city">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">区域</label>
        <div class="layui-input-inline">
            <select name="areacode2"  lay-filter="areacode2">
                <option value='' selected disabled>请先选择上一级</option>
            </select>
            <input type="hidden" name="area">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="Address">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="name">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="telephone">
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-sm  layui-btn-danger" type="button" id="addAddressBtn" onclick="qrtj()">提交</button>
    </div>
</div>

<!--修改-->
<div style="display: none" id="editAddressWin" class="layui-form">
    <input type="hidden" name="upid" id="upid">
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-inline">
            <select name="provincecode" lay-filter="provincecode"></select>
            <input type="hidden" name="upprovince" id="upprovince">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-inline">
            <select name="citycode"  lay-filter="citycode"></select>
            <input type="hidden" name="upcity" id="upcity">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">区域</label>
        <div class="layui-input-inline">
            <select name="areacode"  lay-filter="areacode"></select>
            <input type="hidden" name="uparea" id="uparea">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="upAddress" id="upAddress">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="upname" id="upname">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="uptelephone" id="uptelephone">
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-sm  layui-btn-danger" type="button" onclick="bianjitj()">提交</button>
    </div>
</div>


<script src="layui/layui.all.js"></script>
<script>
    const $ = layui.$;
    const form = layui.form;
    const upload = layui.upload;

    function xzdz(){
        layer.open({
            type: 1,
            area: ['520px', '430px'],
            content:$("#selectAddressWin")
        });
    }
    function useraddress(){
        $.ajax({
            url: "user/getaddress",
            data: {},
            async: false,
            success: function (data) {
                $("#selectAddressWin").empty();
                layer.closeAll();
                for (let i = 0; i < data.length; i++) {
                    if(data[i].isdefault===1){
                        $("#selectAddressWin").append("<div class='address-item default-address' style='background-color: rgba(255,160,122,0.48)'><p id='addressname'>"+data[i].name+"</p><p id='addressphone'>"+data[i].telephone+"</p><p id='addressaddress'>"
                            +data[i].city+"-"+data[i].address+"</p><br/><br/><div class='layui-btn-group'><button class='layui-btn' type='button' onclick='bianji("
                            +data[i].id+")'>编辑</button><button type='button' class='layui-btn layui-btn-danger' onclick='shanchu("+data[i].id+")'>删除</button></div></div>");
                        $(".address-content").html(data[i].city+" "+data[i].area+" "+data[i].address+"<br/>收货人："+data[i].name+"<br/>联系方式："+data[i].telephone);


                        continue;
                    }
                    $("#selectAddressWin").append("<div class='address-item default-address'><div onclick='moren("+data[i].id+")'><p id='addressname'>"+data[i].name+"</p><p id='addressphone'>"+data[i].telephone+"</p><p id='addressaddress'>"
                        +data[i].city+"-"+data[i].address+"</p><br/><br/></div><div class='layui-btn-group'><button class='layui-btn' type='button' onclick='bianji("
                        +data[i].id+")'>编辑</button><button type='button' class='layui-btn layui-btn-danger' onclick='shanchu("+data[i].id+")'>删除</button></div></div>");
                }
                if (data.length < 4) {
                    $("#selectAddressWin").append("<div class='address-item default-address' onclick='xinzeng()' style='display: flex; flex-direction: column; align-items: center; justify-content: center;' ><p id='emptyaddress'>+</p><p id='newaddress'>新增地址</p></div>");
                }
            }
        });
    }
    useraddress();
    function moren(t){
        layer.confirm("修改本次地址，下次购物默认使用此地址",function(index) {
            layer.close(index);
            $.ajax({
                url: "user/defaultaddress",
                data: {id:t},
                async: false,
                success: function (data) {
                    useraddress();
                }
            });
        });
    }
    function bianji(t){
        $.ajax({
            url: "user/getaddressbyid",
            data: {id: t},
            async: false,
            success: function (data) {
                document.getElementById('upid').value = data.id;
                document.getElementById('upprovince').value = data.province;
                document.getElementById('upcity').value = data.city;
                document.getElementById('uparea').value = data.area;
                document.getElementById('upAddress').value = data.address;
                document.getElementById('upname').value = data.name;
                document.getElementById('uptelephone').value = data.telephone;
            }
        });
        layer.open({
            type: 1,
            area: ['500px', '600px'],
            content:$("#editAddressWin")
        });
    }
    function bianjitj(){
        let address= {};
        let id= $("input[name='upid']").val();
        let province=$("input[name='upprovince']").val();
        let city=$("input[name='upcity']").val();
        let area=$("input[name='uparea']").val();
        let Address=$("input[name='upAddress']").val();
        let name=$("input[name='upname']").val();
        let telephone=$("input[name='uptelephone']").val();
        if (id){address.id=id;}else{layer.msg("收货地址异常，请联系管理员"); return false;}
        if (province){address.province=province;}else{layer.msg("请选择省份"); return false;}
        if (city){address.city=city;}else{layer.msg("请选择城市"); return false;}
        if (area){address.area=area;}else{layer.msg("请选择地区"); return false;}
        if (Address){address.address=Address;}else{layer.msg("请填写详细地区"); return false;}
        if (name){address.name=name;}else{layer.msg("请填写收货人"); return false;}
        if (telephone){address.telephone=telephone;}else{layer.msg("请填写联系电话"); return false;}
        layer.confirm("确认地址无误?",function(index) {
            layer.close(index);
            layer.closeAll();
            console.log(address);
            $.ajax({
                url: "user/editaddress",
                data: address,
                async: false,
                success: function (data) {
                    useraddress();
                }
            });
        })
    }
    function xinzeng(){
        layer.open({
            type: 1,
            area: ['500px', '600px'],
            content:$("#addAddressWin")
        });
    }
    function qrtj(){
        let address= {};
        let province=$("input[name='province']").val();
        let city=$("input[name='city']").val();
        let area=$("input[name='area']").val();
        let Address=$("input[name='Address']").val();
        let name=$("input[name='name']").val();
        let telephone=$("input[name='telephone']").val();
        if (province){address.province=province;}else{layer.msg("请选择省份"); return false;}
        if (city){address.city=city;}else{layer.msg("请选择城市"); return false;}
        if (area){address.area=area;}else{layer.msg("请选择地区"); return false;}
        if (Address){address.address=Address;}else{layer.msg("请填写详细地区"); return false;}
        if (name){address.name=name;}else{layer.msg("请填写收货人"); return false;}
        if (telephone){address.telephone=telephone;}else{layer.msg("请填写联系电话"); return false;}
        layer.confirm("确认地址无误?",function(index) {
            //点击确认后执行函数
            layer.close(index);
            layer.closeAll();
            $.ajax({
                url: "user/addaddress",
                data: address,
                async: false,
                success: function (data) {
                    useraddress();
                }
            });
        })
    }
    function shanchu(t){
        layer.confirm("确认删除?",function(index) {
            layer.close(index);
            $.ajax({
                url: "user/deleteaddress",
                data: {id:t},
                async: false,
                success: function (data) {
                    useraddress();
                    layer.msg("成功删除"+data+"条收货地址");
                }
            });
        });
    }

    function getCart() {
        $.ajax({
            url: "cart/list",
            data: {},
            async: false,
            success: function (data) {
                $(".goods-list").empty();
                console.log(data);
                let pricesum=0;
                let ifhas=0;
                for (let i = 0; i < data.length; i++) {
                    if (data[i].selected === 1) {
                        $(".goods-list").append("<div class='goods-item'><img src='"+data[i].goods.defaultimg
                            +"' class='goods-img'><div class='goods-info'><div class='goods-title'>"+data[i].goods.name
                            +"</div><div class='goods-spec'>"+data[i].goods.info+"</div></div><div class='goods-price'>¥"
                            +data[i].goods.price+"<br><span style='font-size:12px;color:#999'>x"+data[i].number+"</span></div></div>")
                        pricesum+=(data[i].goods.price*data[i].number);
                        ifhas++;
                    }
                }
                if(! ifhas){
                    $(".goods-list").append("no selected items");
                }
                $("#priceInAll").html("<span>商品总价：</span><span>￥"+((Math.ceil(pricesum*100))/100).toFixed(2)+"</span>");
                $("#priceFinally").html("<span>实付款：</span><span>￥"+((Math.ceil(pricesum*100))/100).toFixed(2)+"</span>");
            }
        });
    }
    getCart();

    function jiesuandingdan(){
        $.ajax({
            url: "order/add",
            data: {},
            async: false,
            success: function (data) {
                if(data>0){
                    console.log(data);
                    location.href = "shopping/payment?orderid="+data;
                }else{
                    layer.confirm("支付异常，进入'我的订单'重新支付，其他问题请联系管理员",function(index) {
                        layer.close(index);
                        location.href = "shopping/userinfo";
                    });
                }
            }
        });
    }

    showArea(100000, $("[name='provincecode']"));
    showArea(100000, $("[name='provincecode2']"));

    function showArea(code, $dom) {
        $.ajax({
            url: "https://restapi.amap.com/v3/config/district",
            data: {key: 'd5e466c74f37e2b1f89163a68a161ea7', keywords: code},
            success: function (result) {
                let children = result.districts[0].districts;
                $dom.empty();
                $dom.append($("<option selected disabled >请选择</option>"));
                for (let i = 0; i < children.length; i++) {
                    $dom.append($("<option value='" + children[i].adcode + "'>" + children[i].name + "</option>"));
                }
                form.render("select");
            }
        });
    }
    form.on('select(provincecode)', function (data) {
        let provincecode = data.value; //得到被选中的值
        showArea(provincecode, $("[name='citycode']"));
        let provincename = $(data.othis).find("input").val();
        $("[name='upprovince']").val(provincename);
        $("[name='upcity']").val(null);
        $("[name='uparea']").val(null);
    });
    form.on('select(citycode)', function (data) {
        let citycode = data.value; //得到被选中的值
        showArea(citycode, $("[name='areacode']"));
        let cityname = $(data.othis).find("input").val();
        $("[name='upcity']").val(cityname);
        $("[name='uparea']").val(null);
    });
    form.on('select(areacode)', function (data) {
        let areaname = $(data.othis).find("input").val();
        $("[name='uparea']").val(areaname);
    });

    form.on('select(provincecode2)', function (data) {
        let provincecode2 = data.value; //得到被选中的值
        showArea(provincecode2, $("[name='citycode2']"));
        let provincename2 = $(data.othis).find("input").val();
        $("[name='province']").val(provincename2);
    });
    form.on('select(citycode2)', function (data) {
        let citycode2 = data.value; //得到被选中的值
        showArea(citycode2, $("[name='areacode2']"));
        let cityname2 = $(data.othis).find("input").val();
        $("[name='city']").val(cityname2);
    });
    form.on('select(areacode2)', function (data) {
        let areaname2 = $(data.othis).find("input").val();
        $("[name='area']").val(areaname2);
    });





    // //下面这个按钮事件已失效，先保留一下，万一后面还需要用到这个功能
    // $("JieSuanBtn").on("click",function(){
    //     $(this).prop("disabled",true);
    //         //点击后事件：首先使按钮失效，原来的功能不再执行
    //     let formdata={
    //         id:[],
    //         number:[]
    //     };
    //     $("[name='id']").each(function(index,item){
    //                 //item是组件，index是下标
    //         // formdata[item.name]=item.value;
    //         formdata.id.push($(item).val());
    //     });
    //     $("[name='number']").each(function(index,item){
    //         formdata.number.push($(item).val());
    //     });
    // });
    // $.ajax({
    //     url: "order/added",
    //     data: formdata,
    //     contentType: "application/x-www-form-urlencoded",
    //     success: function (data) {
    //         console.log(data);
    //     }
    // })

</script>
</body>
</html>
